<div style="padding:24px;">

  <!-- 卡券被自己关闭 -->
  <div class="container-warp" *ngIf="status === 1">
    <div class="center">
      <i class="dredge"></i>
      <button nz-button [nzType]="'primary'" [nzSize]="large" (click)="applyCoupon()">
        <span>开通卡券</span>
      </button>
      <span class="text">基于卡券的营销方式，提高用户的复购率。</span>
    </div>
  </div>
  <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzSelectedIndex]="selectedIndex" *ngIf="status === 0">
    <nz-tab>
      <ng-template #nzTabHeading>
        卡券列表
      </ng-template>
      <div class="tab-content">
        <div class="operation-line">
          <button nz-button [nzType]="'primary'" (click)="goAddPage()">
            <span>新建卡券</span>
          </button>
          <nz-input
            style="width: 200px;float: right;"
            [nzType]="'search'"
            [nzPlaceHolder]="'输入卡券名称'"
            [(ngModel)]="coupon_name"
            (nzBlur)="search()"></nz-input>
        </div>
        <div class="table-content">
          <nz-table #nzTable
                    [nzAjaxData]="cardList"
                    [nzLoading]="loading"
                    [(nzPageIndex)]="page"
                    [(nzPageSize)]="pageSize"
                    [nzTotal]="total"
                    (nzPageIndexChange)="getListDate()">
            <thead nz-thead>
            <tr>
              <th nz-th style="width:50px;"><span>ID</span></th>
              <th nz-th><span>卡券名称</span></th>
              <th nz-th style="width:220px;"><span>卡券有效期</span></th>
              <th nz-th style="width:120px;"><span>卡券原始库存</span></th>
              <th nz-th style="width:100px;"><span>卡券领取量</span></th>
              <th nz-th style="width:100px;"><span>卡券核销量</span></th>
              <th nz-th><span>备注信息</span></th>
              <th nz-th style="width:300px;"><span>操作</span></th>
            </tr>
            </thead>
            <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of cardList;let i = index;">
              <td nz-td>{{data.id}}</td>
              <td nz-td style="width: 200px;">{{data.card_coupons_name}}</td>
              <td nz-td *ngIf="data.term_of_validity_type === 1">
                {{data.term_of_validity_time_start.substring(0,10)}}至{{data.term_of_validity_time_end.substring(0,10)}}
              </td>
              <td nz-td *ngIf="data.term_of_validity_type === 2">领取{{data.term_of_validity_start}}天后生效
                有效期{{data.term_of_validity}}天
              </td>
              <td nz-td *ngIf="data.in_stock_type == 0">不限</td>
              <td nz-td *ngIf="data.in_stock_type == 1">{{data.in_stock}}</td>
              <td nz-td>{{data.card_coupons_used_report?.distribution_total}}</td>
              <td nz-td>{{data.card_coupons_used_report?.used_total}}</td>
              <td nz-td style="width: 250px;">{{data.remark}}</td>
              <td nz-td>
                <span>
                    <a href="javascript:;" (click)="showQrcodeModal(data.id,i)">生成优惠券</a>
                      <span nz-table-divider></span>
                    <a href="javascript:;" (click)="goDetail(data.id)">详情</a>
                      <span nz-table-divider></span>
                    <a href="javascript:;" (click)="goEdit(data.id)">编辑</a>
                      <span nz-table-divider></span>
                    <a href="javascript:;" (click)="delCard(data.id)">删除</a>
                    </span>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </nz-tab>
    <nz-tab>
      <ng-template #nzTabHeading>
        卡券领取设置
      </ng-template>
      <div class="tab-content" style="padding-top: 25px;">
        <nz-tabset [(nzSelectedIndex)]="typeIndex" [nzAnimated]=" false" (nzSelectedIndexChange)="selectTab()">
          <nz-tab>
            <ng-template #nzTabHeading>
              新人礼品券
            </ng-template>
            <div class="operation-line text-right">
              <button nz-button [nzType]="'primary'" (click)="addBindCoupon()">
                <span>增加卡券</span>
              </button>
            </div>
          </nz-tab>
          <nz-tab>
            <ng-template #nzTabHeading>
              支付完成卡券
            </ng-template>
            <div class="operation-line text-right">
              <button nz-button [nzType]="'primary'" (click)="addBindCoupon()">
                <span>增加卡券</span>
              </button>
            </div>
          </nz-tab>
        </nz-tabset>
        <div class="table-content">
          <nz-table #nzTable
                    [nzDataSource]="receiveCardInfo.cardListByTag"
                    [nzPageSize]="10">
            <thead nz-thead>
            <tr>
              <th nz-th><span>ID</span></th>
              <th nz-th><span>卡券名称</span></th>
              <th nz-th><span>卡券有效期</span></th>
              <th nz-th><span>卡券原始库存</span></th>
              <th nz-th><span>卡券剩余库存</span></th>
              <th nz-th><span>卡券核销量</span></th>
              <th nz-th><span>备注信息</span></th>
              <th nz-th><span>操作</span></th>
            </tr>
            </thead>
            <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of receiveCardInfo.cardListByTag">
              <td nz-td>{{data.id}}</td>
              <td nz-td>{{data.card_coupons_name}}</td>
              <td nz-td *ngIf="data.term_of_validity_type === 1">
                {{data.term_of_validity_time_start.substring(0,10)}}至{{data.term_of_validity_time_end.substring(0,10)}}
              </td>
              <td nz-td *ngIf="data.term_of_validity_type === 2">领取{{data.term_of_validity_start}}天后生效
                有效期{{data.term_of_validity}}天
              </td>
              <td nz-td *ngIf="data.in_stock_type === 0">不限</td>
              <td nz-td *ngIf="data.in_stock_type === 1">{{data.in_stock}}</td>
              <td nz-td>{{data.remain}}</td>
              <td nz-td>{{data.card_coupons_used_report?.used_total}}</td>
              <td nz-td>{{data.remark}}</td>
              <td nz-td>
                <span>
                  <a href="javascript:;" (click)="delCardTag(data.card_coupons_uuid)">删除</a>
                </span>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
</div>

<!-- 添加卡券 start -->
<nz-modal
  [nzVisible]="cardModalVisible"
  [nzTitle]="modalheader1"
  [nzWidth]="'1200px'"
  [nzContent]="modalContent1"
  (nzOnCancel)="cardModalVisible = false;"
  (nzOnOk)="bindingCardByTag()">
  <ng-template #modalheader1>
    <div><span style="font-weight: bold;">选择卡券 </span>({{typeName}}, 最多选择5张)</div>
  </ng-template>
  <ng-template #modalContent1>
    <nz-table #nzTable
              [nzAjaxData]="receiveCardInfo.allCardList"
              [nzLoading]="addTag_loading"
              [(nzPageIndex)]="addTag_page"
              [(nzPageSize)]="addTag_pageSize"
              [nzTotal]="addTag_total"
              (nzPageIndexChange)="getCradListForTag()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox>
          <label nz-checkbox
                 [(ngModel)]="allChecked"
                 [nzIndeterminate]="indeterminate"
                 (ngModelChange)="checkAll($event)">
          </label>
        </th>
        <th nz-th style="width:100px;"><span>ID</span></th>
        <th nz-th><span>卡券名称</span></th>
        <th nz-th style="width:200px;"><span>卡券有效期</span></th>
        <th nz-th style="width:150px;"><span>卡券原始库存</span></th>
        <th nz-th style="width:150px;"><span>卡券剩余库存</span></th>
        <th nz-th style="width:150px;"><span>卡券核销量</span></th>
        <th nz-th><span>备注</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of receiveCardInfo.allCardList">
        <td nz-td nzCheckbox>
          <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="checkedSingle($event, data)">
          </label>
        </td>
        <td nz-td>{{data.id}}</td>
        <td nz-td style="width: 160px;">{{data.card_coupons_name}}</td>
        <td nz-td *ngIf="data.term_of_validity_type === 1">
          {{data.term_of_validity_time_start.substring(0,10)}}至{{data.term_of_validity_time_end.substring(0,10)}}
        </td>
        <td nz-td *ngIf="data.term_of_validity_type === 2">领取{{data.term_of_validity_start}}天后生效
          有效期{{data.term_of_validity}}天
        </td>
        <td nz-td *ngIf="data.in_stock_type === 0">不限</td>
        <td nz-td *ngIf="data.in_stock_type === 1">{{data.in_stock}}</td>
        <td nz-td>{{data.remain}}</td>
        <td nz-td>{{data.card_coupons_used_report?.used_total}}</td>
        <td nz-td style="width: 180px;">{{data.remark}}</td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加卡券 end -->


<nz-modal [nzVisible]="qrcodeVisible" [nzTitle]="'优惠券'" [nzWidth]="'800px'" [nzContent]="modalContent"
          (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
  <ng-template #modalContent>
    <div class="qrcode-wrapper" *ngIf="cardList.length > 0">
      <nz-spin class="card-loading" *ngIf="cardLoading" [nzTip]="'正在生成优惠券...'">
      </nz-spin>
      <div style="position: relative;width:750px;height:300px;" (mouseenter)="showShadow()"
           (mouseleave)="hideShadow()">
        <ng-container *ngIf="editIndex != null && cardList[editIndex]['editImage']">
          <img [src]="cardList[editIndex]['editImage']" alt="">
          <div style="font-size:15px;position: absolute;bottom:0;left:0;display:flex;align-items:center;">
            <p id="link">图片链接：{{ cardList[editIndex]['editImage'] }}
            <p>
              <button nz-button [nzType]="'primary'" style="margin-left:10px;"
                      (click)="copyLink(cardList[editIndex]['editImage'])">复制链接
              </button>
          </div>
          <span [ngClass]="{'qrcode-edit-shadow':qrcodeShowStatus}"></span>
          <button nz-button [nzType]="'primary'" *ngIf="qrcodeShowStatus"
                  (click)="downloadImage(cardList[editIndex]['editImage'])"
                  class="qrcode-edit-btn download-btn">下载优惠券
          </button>
        </ng-container>
      </div>
    </div>
  </ng-template>
</nz-modal>
